<template>
	<view class="provice">
		<view class="line"></view>
		<view v-for="item in proviceList" :key="item.province_id" class="list" @click="changeCity(item)">
			<text>{{item.province_name}}</text>
			<image class="icon-arrow" src="../../static/images/icon-right-arrow.png"></image>
		</view>
	</view>
</template>

<script setup>
	import {data as proviceList} from "../../json/area_province.js"
	const changeCity=(item)=>{
		uni.navigateTo({
			url:"./changeCity?province_id="+item.province_id+"&provice_name="+item.province_name
		})
	}
</script>

<style scoped lang="scss">
	.icon-arrow{
		width: 32rpx;
		height: 32rpx;
	} 
	.line{
	   height: 1px;
	   background-color: #252731;
	}
	.list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:20rpx;
	}
</style>
